<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发布支教需求 - 朋知云学</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/login.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    <style>
        /* 发布需求页面特定样式 */
        .post-demand-section {
            padding: 60px 0;
            min-height: calc(100vh - 400px);
            background-color: #f8f9fa;
            background-image: linear-gradient(135deg, #f8f9fa 0%, #e9f2f9 100%);
        }
        
        .post-demand-container {
            max-width: 800px;
            margin: 0 auto;
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 5px 30px rgba(0, 0, 0, 0.08);
            padding: 40px;
            animation: fadeIn 0.6s ease-in-out;
            transform: translateY(0);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .post-demand-container:hover {
            box-shadow: 0 8px 35px rgba(91, 192, 235, 0.12);
        }
        
        .post-demand-header {
            text-align: center;
            margin-bottom: 35px;
            position: relative;
            padding-bottom: 15px;
        }
        
        .post-demand-header::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 3px;
            background: linear-gradient(90deg, #5bc0eb, #3a9fcb);
            border-radius: 3px;
        }
        
        .post-demand-header h2 {
            font-size: 28px;
            color: #2c3e50;
            margin-bottom: 12px;
            font-weight: 600;
        }
        
        .post-demand-header p {
            color: #7f8c8d;
            font-size: 16px;
        }
        
        .form-row {
            display: flex;
            gap: 25px;
            margin-bottom: 25px;
        }
        
        .form-col {
            flex: 1;
        }
        
        .form-group {
            margin-bottom: 25px;
        }
        
        h3 {
            font-size: 20px;
            color: #2c3e50;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #ecf0f1;
            position: relative;
        }
        
        h3::before {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 50px;
            height: 3px;
            background: #5bc0eb;
            border-radius: 3px;
        }
        
        .form-label {
            display: block;
            margin-bottom: 10px;
            font-weight: 500;
            color: #34495e;
            font-size: 15px;
            transition: color 0.3s ease;
        }
        
        .form-control {
            width: 100%;
            padding: 14px 18px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            font-size: 15px;
            transition: all 0.3s ease;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
            background-color: #fff;
        }
        
        .form-control:focus {
            border-color: #5bc0eb;
            outline: none;
            box-shadow: 0 0 0 3px rgba(91, 192, 235, 0.15);
            transform: translateY(-1px);
        }
        
        textarea.form-control {
            min-height: 140px;
            resize: vertical;
            line-height: 1.6;
        }
        
        .form-select {
            width: 100%;
            padding: 14px 18px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            font-size: 15px;
            appearance: none;
            background-image: url('data:image/svg+xml;utf8,<svg fill="%2334495e" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
            background-repeat: no-repeat;
            background-position: right 15px center;
            background-color: #fff;
            transition: all 0.3s ease;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
        }
        
        .form-select:focus {
            border-color: #5bc0eb;
            outline: none;
            box-shadow: 0 0 0 3px rgba(91, 192, 235, 0.15);
            transform: translateY(-1px);
        }
        
        .form-check {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
            padding: 8px 12px;
            border-radius: 6px;
            transition: background-color 0.2s ease;
        }
        
        .form-check:hover {
            background-color: #f8f9fa;
        }
        
        .form-check input {
            margin-right: 12px;
            width: 18px;
            height: 18px;
            accent-color: #5bc0eb;
            cursor: pointer;
        }
        
        .form-check label {
            cursor: pointer;
            font-size: 15px;
            color: #4a5568;
        }
        
        .btn-submit {
            width: 100%;
            padding: 16px;
            font-size: 16px;
            font-weight: 600;
            background: linear-gradient(90deg, #5bc0eb, #3a9fcb);
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(91, 192, 235, 0.25);
            position: relative;
            overflow: hidden;
        }
        
        .btn-submit:hover {
            background: linear-gradient(90deg, #3a9fcb, #2980b9);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(91, 192, 235, 0.35);
        }
        
        .btn-submit:active {
            transform: translateY(0);
            box-shadow: 0 2px 10px rgba(91, 192, 235, 0.2);
        }
        
        .btn-submit::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 5px;
            height: 5px;
            background: rgba(255, 255, 255, 0.5);
            opacity: 0;
            border-radius: 100%;
            transform: scale(1, 1) translate(-50%);
            transform-origin: 50% 50%;
        }
        
        .btn-submit:focus:not(:active)::after {
            animation: ripple 1s ease-out;
        }
        
        @keyframes ripple {
            0% {
                transform: scale(0, 0);
                opacity: 0.5;
            }
            20% {
                transform: scale(25, 25);
                opacity: 0.3;
            }
            100% {
                opacity: 0;
                transform: scale(40, 40);
            }
        }
        
        .form-tips {
            margin-top: 30px;
            padding: 20px;
            background-color: #f8f9fa;
            border-radius: 8px;
            font-size: 14px;
            color: #7f8c8d;
            border-left: 4px solid #5bc0eb;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
        }
        
        .form-tips h4 {
            font-size: 16px;
            margin-bottom: 12px;
            color: #34495e;
            display: flex;
            align-items: center;
        }
        
        .form-tips h4::before {
            content: '\F332';
            font-family: 'bootstrap-icons';
            margin-right: 8px;
            color: #5bc0eb;
        }
        
        .form-tips ul {
            padding-left: 20px;
        }
        
        .form-tips li {
            margin-bottom: 8px;
            list-style-type: none;
            position: relative;
            padding-left: 5px;
        }
        
        .form-tips li::before {
            content: '•';
            color: #5bc0eb;
            font-weight: bold;
            display: inline-block;
            width: 1em;
            margin-left: -1em;
        }
        
        .required-field::after {
            content: " *";
            color: #e74c3c;
            font-weight: bold;
        }
        
        .form-error {
            color: #e74c3c;
            font-size: 13px;
            margin-top: 6px;
            display: none;
            animation: shake 0.5s ease-in-out;
            padding-left: 5px;
        }
        
        @keyframes shake {
            0%, 100% {transform: translateX(0);}
            10%, 30%, 50%, 70%, 90% {transform: translateX(-5px);}
            20%, 40%, 60%, 80% {transform: translateX(5px);}
        }
        
        .success-message {
            display: none;
            text-align: center;
            padding: 30px;
            background-color: #d4edda;
            color: #155724;
            border-radius: 8px;
            margin-bottom: 30px;
            animation: fadeIn 0.5s ease-in-out;
            box-shadow: 0 4px 15px rgba(46, 204, 113, 0.15);
        }
        
        .success-message i {
            font-size: 48px;
            color: #2ecc71;
            margin-bottom: 15px;
            display: block;
        }
        
        .success-message h3 {
            border: none;
            padding: 0;
            margin-bottom: 15px;
            color: #155724;
        }
        
        .success-message h3::before {
            display: none;
        }
        
        .success-message a {
            display: inline-block;
            margin-top: 15px;
            padding: 10px 20px;
            background-color: #2ecc71;
            color: white;
            border-radius: 6px;
            text-decoration: none;
            transition: all 0.3s ease;
        }
        
        .success-message a:hover {
            background-color: #27ae60;
            transform: translateY(-2px);
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .post-demand-container {
                padding: 25px;
            }
            
            .form-row {
                flex-direction: column;
                gap: 0;
            }
            
            .post-demand-header h2 {
                font-size: 24px;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <header class="navbar">
        <div class="container">
            <div class="logo">
                <img src="../static/avatar1.png" alt="朋知云学">
                <span>朋知云学</span>
            </div>
            <nav class="nav-menu">
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="demands.html">支教需求</a></li>
                    <li><a href="ai-assistant.html">AI助手</a></li>
                    <li><a href="user-center.html">用户中心</a></li>
                </ul>
            </nav>
            <div class="user-actions">
                <a href="login.html" class="btn btn-login">登录</a>
                <a href="register.html" class="btn btn-register">注册</a>
            </div>
        </div>
    </header>

    <!-- 发布需求表单 -->
    <section class="post-demand-section">
        <div class="container">
            <div class="post-demand-container">
                <div class="post-demand-header">
                    <h2>发布支教需求</h2>
                    <p>填写以下信息，发布您的支教需求</p>
                </div>
                
                <div class="success-message" id="success-message">
                    <i class="bi bi-check-circle"></i>
                    <h3>提交成功！</h3>
                    <p>您的支教需求已成功提交，我们将尽快审核。</p>
                    <a href="demands.html" class="btn btn-primary">查看所有需求</a>
                </div>
                
                <form id="post-demand-form" class="post-demand-form">
                    <!-- 基本信息 -->
                    <h3>基本信息</h3>
                    <div class="form-row">
                        <div class="form-col">
                            <div class="form-group">
                                <label for="title" class="form-label required-field">需求标题</label>
                                <input type="text" id="title" name="title" class="form-control" placeholder="例如：山区小学语文教师支教" required>
                                <div class="form-error" id="title-error">请输入需求标题</div>
                            </div>
                        </div>
                        <div class="form-col">
                            <div class="form-group">
                                <label for="demand-type" class="form-label required-field">需求类型</label>
                                <select id="demand-type" name="demand-type" class="form-select" required>
                                    <option value="">请选择需求类型</option>
                                    <option value="urgent">紧急需求</option>
                                    <option value="long-term">长期支教</option>
                                    <option value="short-term">短期支教</option>
                                    <option value="online">线上支教</option>
                                </select>
                                <div class="form-error" id="demand-type-error">请选择需求类型</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 学校信息 -->
                    <h3>学校信息</h3>
                    <div class="form-row">
                        <div class="form-col">
                            <div class="form-group">
                                <label for="school-name" class="form-label required-field">学校名称</label>
                                <input type="text" id="school-name" name="school-name" class="form-control" placeholder="请输入学校全称" required>
                                <div class="form-error" id="school-name-error">请输入学校名称</div>
                            </div>
                        </div>
                        <div class="form-col">
                            <div class="form-group">
                                <label for="school-type" class="form-label required-field">学校类型</label>
                                <select id="school-type" name="school-type" class="form-select" required>
                                    <option value="">请选择学校类型</option>
                                    <option value="primary">小学</option>
                                    <option value="junior">初中</option>
                                    <option value="senior">高中</option>
                                    <option value="comprehensive">完全中学</option>
                                    <option value="other">其他教育机构</option>
                                </select>
                                <div class="form-error" id="school-type-error">请选择学校类型</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-col">
                            <div class="form-group">
                                <label for="province" class="form-label required-field">所在省份</label>
                                <select id="province" name="province" class="form-select" required>
                                    <option value="">请选择省份</option>
                                    <option value="beijing">北京市</option>
                                    <option value="tianjin">天津市</option>
                                    <option value="hebei">河北省</option>
                                    <option value="shanxi">山西省</option>
                                    <option value="neimenggu">内蒙古自治区</option>
                                    <option value="liaoning">辽宁省</option>
                                    <option value="jilin">吉林省</option>
                                    <option value="heilongjiang">黑龙江省</option>
                                    <option value="shanghai">上海市</option>
                                    <option value="jiangsu">江苏省</option>
                                    <option value="zhejiang">浙江省</option>
                                    <option value="anhui">安徽省</option>
                                    <option value="fujian">福建省</option>
                                    <option value="jiangxi">江西省</option>
                                    <option value="shandong">山东省</option>
                                    <option value="henan">河南省</option>
                                    <option value="hubei">湖北省</option>
                                    <option value="hunan">湖南省</option>
                                    <option value="guangdong">广东省</option>
                                    <option value="guangxi">广西壮族自治区</option>
                                    <option value="hainan">海南省</option>
                                    <option value="chongqing">重庆市</option>
                                    <option value="sichuan">四川省</option>
                                    <option value="guizhou">贵州省</option>
                                    <option value="yunnan">云南省</option>
                                    <option value="xizang">西藏自治区</option>
                                    <option value="shaanxi">陕西省</option>
                                    <option value="gansu">甘肃省</option>
                                    <option value="qinghai">青海省</option>
                                    <option value="ningxia">宁夏回族自治区</option>
                                    <option value="xinjiang">新疆维吾尔自治区</option>
                                </select>
                                <div class="form-error" id="province-error">请选择省份</div>
                            </div>
                        </div>
                        <div class="form-col">
                            <div class="form-group">
                                <label for="city" class="form-label required-field">所在城市/地区</label>
                                <input type="text" id="city" name="city" class="form-control" placeholder="请输入城市或地区名称" required>
                                <div class="form-error" id="city-error">请输入城市或地区</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="address" class="form-label required-field">详细地址</label>
                        <input type="text" id="address" name="address" class="form-control" placeholder="请输入详细地址" required>
                        <div class="form-error" id="address-error">请输入详细地址</div>
                    </div>
                    
                    <!-- 需求详情 -->
                    <h3>需求详情</h3>
                    <div class="form-row">
                        <div class="form-col">
                            <div class="form-group">
                                <label for="start-date" class="form-label required-field">开始日期</label>
                                <input type="date" id="start-date" name="start-date" class="form-control" required>
                                <div class="form-error" id="start-date-error">请选择开始日期</div>
                            </div>
                        </div>
                        <div class="form-col">
                            <div class="form-group">
                                <label for="end-date" class="form-label required-field">结束日期</label>
                                <input type="date" id="end-date" name="end-date" class="form-control" required>
                                <div class="form-error" id="end-date-error">请选择结束日期</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label required-field">需求科目</label>
                        <div class="form-check">
                            <input type="checkbox" id="subject-chinese" name="subjects[]" value="chinese">
                            <label for="subject-chinese">语文</label>
                        </div>
                        <div class="form-check">
                            <input type="checkbox" id="subject-math" name="subjects[]" value="math">
                            <label for="subject-math">数学</label>
                        </div>
                        <div class="form-check">
                            <input type="checkbox" id="subject-english" name="subjects[]" value="english">
                            <label for="subject-english">英语</label>
                        </div>
                        <div class="form-check">
                            <input type="checkbox" id="subject-physics" name="subjects[]" value="physics">
                            <label for="subject-physics">物理</label>
                        </div>
                        <div class="form-check">
                            <input type="checkbox" id="subject-chemistry" name="subjects[]" value="chemistry">
                            <label for="subject-chemistry">化学</label>
                        </div>
                        <div class="form-check">
                            <input type="checkbox" id="subject-biology" name="subjects[]" value="biology">
                            <label for="subject-biology">生物</label>
                        </div>
                        <div class="form-check">
                            <input type="checkbox" id="subject-history" name="subjects[]" value="history">
                            <label for="subject-history">历史</label>
                        </div>
                        <div class="form-check">
                            <input type="checkbox" id="subject-geography" name="subjects[]" value="geography">
                            <label for="subject-geography">地理</label>
                        </div>
                        <div class="form-check">
                            <input type="checkbox" id="subject-politics" name="subjects[]" value="politics">
                            <label for="subject-politics">政治</label>
                        </div>
                        <div class="form-check">
                            <input type="checkbox" id="subject-music" name="subjects[]" value="music">
                            <label for="subject-music">音乐</label>
                        </div>
                        <div class="form-check">
                            <input type="checkbox" id="subject-art" name="subjects[]" value="art">
                            <label for="subject-art">美术</label>
                        </div>
                        <div class="form-check">
                            <input type="checkbox" id="subject-pe" name="subjects[]" value="pe">
                            <label for="subject-pe">体育</label>
                        </div>
                        <div class="form-check">
                            <input type="checkbox" id="subject-other" name="subjects[]" value="other">
                            <label for="subject-other">其他</label>
                        </div>
                        <div class="form-error" id="subjects-error">请至少选择一个科目</div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-col">
                            <div class="form-group">
                                <label for="people-count" class="form-label required-field">需求人数</label>
                                <input type="number" id="people-count" name="people-count" class="form-control" min="1" placeholder="请输入需求人数" required>
                                <div class="form-error" id="people-count-error">请输入需求人数</div>
                            </div>
                        </div>
                        <div class="form-col">
                            <div class="form-group">
                                <label for="student-count" class="form-label">学生人数</label>
                                <input type="number" id="student-count" name="student-count" class="form-control" min="1" placeholder="请输入学生人数（选填）">
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="description" class="form-label required-field">需求描述</label>
                        <textarea id="description" name="description" class="form-control" placeholder="请详细描述您的支教需求，包括教学内容、学生情况、住宿条件等信息" required></textarea>
                        <div class="form-error" id="description-error">请输入需求描述</div>
                    </div>
                    
                    <!-- 联系方式 -->
                    <h3>联系方式</h3>
                    <div class="form-row">
                        <div class="form-col">
                            <div class="form-group">
                                <label for="contact-name" class="form-label required-field">联系人姓名</label>
                                <input type="text" id="contact-name" name="contact-name" class="form-control" placeholder="请输入联系人姓名" required>
                                <div class="form-error" id="contact-name-error">请输入联系人姓名</div>
                            </div>
                        </div>
                        <div class="form-col">
                            <div class="form-group">
                                <label for="contact-phone" class="form-label required-field">联系电话</label>
                                <input type="tel" id="contact-phone" name="contact-phone" class="form-control" placeholder="请输入联系电话" required>
                                <div class="form-error" id="contact-phone-error">请输入有效的联系电话</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-col">
                            <div class="form-group">
                                <label for="contact-email" class="form-label">电子邮箱</label>
                                <input type="email" id="contact-email" name="contact-email" class="form-control" placeholder="请输入电子邮箱（选填）">
                                <div class="form-error" id="contact-email-error">请输入有效的电子邮箱</div>
                            </div>
                        </div>
                        <div class="form-col">
                            <div class="form-group">
                                <label for="contact-wechat" class="form-label">微信号</label>
                                <input type="text" id="contact-wechat" name="contact-wechat" class="form-control" placeholder="请输入微信号（选填）">
                            </div>
                        </div>
                    </div>
                    
                    <!-- 提交按钮 -->
                    <div class="form-group">
                        <button type="submit" class="btn btn-submit">提交需求</button>
                    </div>
                    
                    <!-- 提示信息 -->
                    <div class="form-tips">
                        <h4>提交须知：</h4>
                        <ul>
                            <li>带 * 号的为必填项，请确保信息准确无误</li>
                            <li>提交后，我们将在1-2个工作日内审核您的需求</li>
                            <li>审核通过后，您的需求将在平台上公开展示</li>
                            <li>如有疑问，请联系客服：support@pengzhi.com</li>
                        </ul>
                    </div>
                </form>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-logo">
                    <img src="../static/avatar1.png" alt="朋知云学">
                    <p>朋知云学 - 让支教更简单</p>
                </div>
                <div class="footer-links">
                    <div class="link-group">
                        <h4>关于我们</h4>
                        <ul>
                            <li><a href="about.html">平台介绍</a></li>
                            <li><a href="rules.html">用户守则</a></li>
                            <li><a href="contact.html">联系我们</a></li>
                        </ul>
                    </div>
                    <div class="link-group">
                        <h4>帮助中心</h4>
                        <ul>
                            <li><a href="tutorial.html">使用教程</a></li>
                            <li><a href="faq.html">常见问题</a></li>
                            <li><a href="feedback.html">意见反馈</a></li>
                        </ul>
                    </div>
                    <div class="link-group">
                        <h4>法律信息</h4>
                        <ul>
                            <li><a href="agreement.html">用户协议</a></li>
                            <li><a href="privacy.html">隐私政策</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2023 朋知云学. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script src="js/main.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const postDemandForm = document.getElementById('post-demand-form');
            const successMessage = document.getElementById('success-message');
            
            if (postDemandForm) {
                postDemandForm.addEventListener('submit', function(e) {
                    e.preventDefault();
                    
                    // 表单验证
                    let isValid = true;
                    
                    // 验证标题
                    const title = document.getElementById('title');
                    if (!title.value.trim()) {
                        document.getElementById('title-error').style.display = 'block';
                        isValid = false;
                    } else {
                        document.getElementById('title-error').style.display = 'none';
                    }
                    
                    // 验证需求类型
                    const demandType = document.getElementById('demand-type');
                    if (!demandType.value) {
                        document.getElementById('demand-type-error').style.display = 'block';
                        isValid = false;
                    } else {
                        document.getElementById('demand-type-error').style.display = 'none';
                    }
                    
                    // 验证学校名称
                    const schoolName = document.getElementById('school-name');
                    if (!schoolName.value.trim()) {
                        document.getElementById('school-name-error').style.display = 'block';
                        isValid = false;
                    } else {
                        document.getElementById('school-name-error').style.display = 'none';
                    }
                    
                    // 验证学校类型
                    const schoolType = document.getElementById('school-type');
                    if (!schoolType.value) {
                        document.getElementById('school-type-error').style.display = 'block';
                        isValid = false;
                    } else {
                        document.getElementById('school-type-error').style.display = 'none';
                    }
                    
                    // 验证省份
                    const province = document.getElementById('province');
                    if (!province.value) {
                        document.getElementById('province-error').style.display = 'block';
                        isValid = false;
                    } else {
                        document.getElementById('province-error').style.display = 'none';
                    }
                    
                    // 验证城市
                    const city = document.getElementById('city');
                    if (!city.value.trim()) {
                        document.getElementById('city-error').style.display = 'block';
                        isValid = false;
                    } else {
                        document.getElementById('city-error').style.display = 'none';
                    }
                    
                    // 验证地址
                    const address = document.getElementById('address');
                    if (!address.value.trim()) {
                        document.getElementById('address-error').style.display = 'block';
                        isValid = false;
                    } else {
                        document.getElementById('address-error').style.display = 'none';
                    }
                    
                    // 验证开始日期
                    const startDate = document.getElementById('start-date');
                    if (!startDate.value) {
                        document.getElementById('start-date-error').style.display = 'block';
                        isValid = false;
                    } else {
                        document.getElementById('start-date-error').style.display = 'none';
                    }
                    
                    // 验证结束日期
                    const endDate = document.getElementById('end-date');
                    if (!endDate.value) {
                        document.getElementById('end-date-error').style.display = 'block';
                        isValid = false;
                    } else {
                        document.getElementById('end-date-error').style.display = 'none';
                    }
                    
                    // 验证科目选择
                    const subjects = document.querySelectorAll('input[name="subjects[]"]:checked');
                    if (subjects.length === 0) {
                        document.getElementById('subjects-error').style.display = 'block';
                        isValid = false;
                    } else {
                        document.getElementById('subjects-error').style.display = 'none';
                    }
                    
                    // 验证需求人数
                    const peopleCount = document.getElementById('people-count');
                    if (!peopleCount.value || peopleCount.value < 1) {
                        document.getElementById('people-count-error').style.display = 'block';
                        isValid = false;
                    } else {
                        document.getElementById('people-count-error').style.display = 'none';
                    }
                    
                    // 验证需求描述
                    const description = document.getElementById('description');
                    if (!description.value.trim()) {
                        document.getElementById('description-error').style.display = 'block';
                        isValid = false;
                    } else {
                        document.getElementById('description-error').style.display = 'none';
                    }
                    
                    // 验证联系人姓名
                    const contactName = document.getElementById('contact-name');
                    if (!contactName.value.trim()) {
                        document.getElementById('contact-name-error').style.display = 'block';
                        isValid = false;
                    } else {
                        document.getElementById('contact-name-error').style.display = 'none';
                    }
                    
                    // 验证联系电话
                    const contactPhone = document.getElementById('contact-phone');
                    if (!contactPhone.value.trim() || !/^1[3-9]\d{9}$/.test(contactPhone.value)) {
                        document.getElementById('contact-phone-error').style.display = 'block';
                        isValid = false;
                    } else {
                        document.getElementById('contact-phone-error').style.display = 'none';
                    }
                    
                    // 验证电子邮箱（如果填写了）
                    const contactEmail = document.getElementById('contact-email');
                    if (contactEmail.value.trim() && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(contactEmail.value)) {
                        document.getElementById('contact-email-error').style.display = 'block';
                        isValid = false;
                    } else {
                        document.getElementById('contact-email-error').style.display = 'none';
                    }
                    
                    // 如果表单验证通过
                    if (isValid) {
                        // 这里可以添加表单数据提交到服务器的代码
                        
                        // 显示成功消息
                        postDemandForm.style.display = 'none';
                        successMessage.style.display = 'block';
                        
                        // 滚动到顶部
                        window.scrollTo({
                            top: 0,
                            behavior: 'smooth'
                        });
                    } else {
                        // 滚动到第一个错误字段
                        const firstError = document.querySelector('.form-error[style="display: block"]');
                        if (firstError) {
                            firstError.scrollIntoView({
                                behavior: 'smooth',
                                block: 'center'
                            });
                        }
                    }
                });
            }
            
            // 日期验证：结束日期不能早于开始日期
            const startDate = document.getElementById('start-date');
            const endDate = document.getElementById('end-date');
            
            if (startDate && endDate) {
                startDate.addEventListener('change', function() {
                    endDate.min = startDate.value;
                    if (endDate.value && endDate.value < startDate.value) {
                        endDate.value = startDate.value;
                    }
                });
            }
        });
    </script>
</body>
</html>